<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
        }

        table {
            width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        th,
        td {
            line-height: 2em;
        }
    </style>
</head>

<body>
    <button class="addRow">新增一条信息</button>
    <button class="ageadd">年龄从大到小排序</button>
    <button class="delectAll">删除选中</button>
    <br><br>

    <table border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </thead>
        <tbody id="tbody">
            
        </tbody>
    </table>

    <script>
        let tbody = document.querySelector("#tbody")
        let addRow = document.querySelector(".addRow")
        let delectAll = document.querySelector(".delectAll");
        let checkedRemove  = document.querySelector(".delectAll");
        let ageadd = document.querySelector(".ageadd");

        let data = [
            { name: "胡杭", age: 16 },
            { name: "胜明", age: 22 },
            { name: "军毅", age: 21 },
            { name: "晓华", age: 13 },
            { name: "盛聪", age: 23 },
            { name: "侦剑", age: 32 },
            { name: "红翔", age: 25 },
            { name: "超维", age: 18 },
            { name: "士琪", age: 22 },
            { name: "艳华", age: 20 },
        ];

        data.forEach(function (item) {
            item.added = false
        })

        //  用什么来表示序号
        addRow.addEventListener("click", function () {
            let tr = document.createElement("tr")

            data.some(function (item, index) {
                //  找到一个没有被添加到表格中的数据，然后中断遍历
                if (!item.added) { 
                    tr.innerHTML = `
                    <td>${tbody.rows.length + 1}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td><button>删除</button></td>
                    <td><input type="checkbox"></td>`

                    tr.addEventListener("click", function (e) {
                        if (e.target.nodeName.toLowerCase() === 'button') {
                            //  从结构上移除当前行节点
                            tr.remove()
                            //  将原始数据中的added状态进行更改
                            data[index].added = false
                        }
                        numberuppdate();    //序号排序
                    })

                    tbody.appendChild(tr)
                    return item.added = true
                }
            })
        })

        //删除选中
        delectAll.addEventListener('click', function(){
            //给table，tr复选框一个变量
            let inputlist = document.querySelectorAll('table input[type = checkbox]');
            //通过forEach元素去点击删除
            inputlist.forEach(function(item,index){
                if(item.checked){
                    //item相当于复选框的td第一个父元素，第二个tr父元素进行删除
                    item.parentNode.parentNode.remove();
                    
                }
                
            })
        })

               // 多选框删除事件
            checkedRemove.addEventListener("click", function (){
            let allinput=document.querySelectorAll("input")
            allinput.forEach(function (item){
            if(item.checked){
                item.parentNode.parentNode.remove()
            }
            numberuppdate();
        })
        })
        // 年龄降序排列
        ageadd.addEventListener("click",function(){
            let arr=[]
            let rows=tbody.rows
            //添加行
            for(let i=0;i<rows.length;i++){
                arr.push(rows[i])
            }
            console.log(arr)
            //排序
            arr.sort(function(a,b){
                return a.children[2].innerText-b.children[2].innerText
            });
            // 排序后的行 重新添加
            arr.forEach(function(item){
                tbody.appendChild(item)
                numberuppdate();
            })
            
        })
        // 封装序号排列函数
        function numberuppdate(){
            let rows=tbody.rows
            for(let i=0;i<rows.length; i++){
                rows[i].children[0].innerText=i+1
            }
        }






        //  1.  删除后，每一项的序号会更新，不会出现序号中断的情况
        //  2.  新增的信息，序号是依次递进，不会中断
        //  3.  年龄从小到大进行排序
        //  4.  删除选中的项
    </script>
</body>

</html>